<template>
  <!-- 售后-用户信息查询 -->
  <div class="tabs_main">
    <el-form :inline="true" :model="elform" size="mini">
      <el-form-item label="姓名:">
        <el-input v-model="userName" placeholder="姓名" size="mini" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="卡号:">
        <el-input v-model="cardNumber" placeholder="卡号" size="mini" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="学生编号:">
        <el-input
          v-model="userNumber"
          placeholder="学生编号"
          size="mini"
          clearable
          style="width: 120px"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门:">
        <el-select v-model="departmentGuid" placeholder="请选择" size="mini" clearable filterable>
          <el-option
            v-for="item in departmentoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份/分组:">
        <el-select
          v-model="groupingGuid"
          placeholder="请选择"
          size="mini"
          clearable
          filterable
          style="width: 140px"
        >
          <el-option
            v-for="item in groupingoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期:">
        <el-date-picker
          v-model="datetime[0]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[0]"
          value-format="HH:mm:ss"
          placeholder="开始时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-date-picker
          v-model="datetime[1]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[1]"
          value-format="HH:mm:ss"
          placeholder="结束时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <!-- <el-form-item label="类型:" v-if="activeName == 'first'">
        <el-select
          v-model="chargingType"
          placeholder="请选择类型"
          size="mini"
          clearable
          style="width: 130px"
        >
          <el-option
            v-for="item in cardtypesoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="领取状态:" v-if="activeName == 'second'">
        <el-select
          v-model="adjustState"
          placeholder="领取状态"
          size="mini"
          clearable
          style="width: 130px"
        >
          <el-option
            v-for="item in adjustStateOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="activeName == 'first'">
        <el-button type="primary" @click="getUserInfo" size="mini" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="onExport()" size="mini" icon="el-icon-document-copy">导出</el-button>
        <el-button type="primary" @click="onExport('print')" size="mini" icon="el-icon-printer">打印</el-button>
        <el-popover width="550" placement="top" trigger="click">
          <el-row>
            <el-col :span="6" v-for="item in Object.keys(formThead)" :key="item">
              <el-checkbox
                :label="formThead[item].label"
                v-model="formThead[item].checked"
                @change="checkboxChanged()"
              ></el-checkbox>
            </el-col>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
      <el-form-item v-if="activeName == 'second'">
        <el-button type="primary" @click="rechargeTimeChange" size="mini" icon="el-icon-search">查询</el-button>
        <el-button
          type="primary"
          @click="onRechargeExport()"
          size="mini"
          icon="el-icon-document-copy"
        >导出</el-button>
        <el-button
          type="primary"
          @click="onRechargeExport('print')"
          size="mini"
          icon="el-icon-printer"
        >打印</el-button>
        <el-popover width="550" placement="top" trigger="click">
          <el-row>
            <el-col :span="6" v-for="item in Object.keys(formThead2)" :key="item">
              <el-checkbox
                :label="formThead2[item].label"
                v-model="formThead2[item].checked"
                @change="checkboxChanged2()"
              ></el-checkbox>
            </el-col>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
    </el-form>

    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="消费修正操作" name="first">
        <div v-if="Flagcheck">
          <el-form
            :inline="true"
            :model="userForm"
            class="demo-form-inline"
            size="mini"
            :label-position="labelPosition"
            label-width="80px"
            v-if="userForm.userName == '' ? false : true"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="学校" prop="unitName">
                  {{
                  userForm.unitName
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="班级" prop="departmentName">
                  {{
                  userForm.departmentName
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="姓名" prop="name">
                  {{
                  userForm.userName
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别" prop="userSex">
                  {{
                  userForm.userSex == 0 ? "男" : "女"
                  }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="卡号" prop="cardNumber">
                  {{
                  userForm.cardNumber
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="卡余额" prop="cardBalance">
                  {{
                  userForm.cardBalance | amountyuan
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="卡状态" prop="cardState">
                  {{
                  userForm.cardState == 1 ? "挂失" : "正常"
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手机号" prop="phoneNumber">
                  {{
                  userForm.phoneNumber
                  }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="身份证" prop="idCard">
                  {{
                  userForm.idCard
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出生年月" prop="birthday">
                  {{
                  userForm.birthday
                  }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table
            v-loading="loading"
            :data="consumptionList"
            ref="table"
            border
            highlight-current-row
            style="width: 100%"
            :header-cell-style="headFirst"
            :cell-style="(res) => headFirst_col(res, [])"
          >
            <el-table-column
              prop="cardNumber"
              label="卡号"
              align="center"
              min-width="110px"
              v-if="formThead.cardNumber.checked"
            ></el-table-column>
            <el-table-column
              prop="originBalance"
              label="原卡余额(元)"
              align="center"
              min-width="90px"
              v-if="formThead.originBalance.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.originBalance | amountyuan }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="expenditure"
              label="消费金额(元)"
              align="center"
              min-width="80px"
              v-if="formThead.expenditure.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.expenditure | amountyuan }}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="newBalance"
              label="余额(元)"
              align="center"
              v-if="formThead.newBalance.checked"
              min-width="90px"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.newBalance | amountyuan }}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="dataMakeTime"
              label="消费时间"
              align="center"
              min-width="144px"
              v-if="formThead.dataMakeTime.checked"
            ></el-table-column>

            <el-table-column
              prop="isSuccess"
              label="交易状态"
              align="center"
              v-if="formThead.isSuccess.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.isSuccess | isSuccesstype }}</div>
              </template>
            </el-table-column>

            <!-- <el-table-column
              prop="useType"
              label="消费类型"
              align="center"
              v-if="formThead.useType.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.useType | filterchargingType }}</div>
              </template>
            </el-table-column>-->
            <el-table-column
              prop="dataType"
              label="数据类型"
              align="center"
              min-width="110px"
              v-if="formThead.dataType.checked"
            ></el-table-column>
            <el-table-column
              prop="serialNumber"
              label="卡片流水号"
              align="center"
              v-if="formThead.serialNumber.checked"
              min-width="90px"
            ></el-table-column>

            <!-- <el-table-column
              prop="tradeSerialNumber"
              label="交易流水号"
              align="center"
              v-if="formThead.tradeSerialNumber.checked"
            ></el-table-column>-->
            <el-table-column
              prop="terminalCode"
              label="设备编号"
              align="center"
              v-if="formThead.terminalCode.checked"
            ></el-table-column>
            <el-table-column
              prop="place"
              label="场所"
              align="center"
              v-if="formThead.place.checked"
              min-width="124px"
            ></el-table-column>
            <el-table-column label="操作" width="70px">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handleCorrect(scope.row)">修正</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangepage"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="消费修正记录" name="second">
        <div v-if="Flagcheck">
          <el-table
            v-loading="loading2"
            :data="rechargeList"
            ref="rechargeTable"
            border
            highlight-current-row
            style="width: 100%"
            :header-cell-style="headFirst"
            :cell-style="
          detailsTotal ? (res) => headFirst_col(res, rechargeList) : () => {}
        "
          >
             <el-table-column
              prop="userName"
              label="姓名"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="departmentName"
              label="部门名称"
              align="center"
              min-width="120px"
              v-if="formThead2.departmentName.checked"
            ></el-table-column>
          
            <el-table-column
              prop="cardNumber"
              label="卡号"
              align="center"
              min-width="110px"
              v-if="formThead2.cardNumber.checked"
            ></el-table-column>
            <el-table-column
              prop="walletName"
              label="钱包名称"
              align="center"
              v-if="formThead2.walletName.checked"
            ></el-table-column>
            <el-table-column
              prop="rechargeAmount"
              label="修正金额(元)"
              align="center"
              v-if="formThead2.rechargeAmount.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.rechargeAmount | amountjiao }}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="balance"
              label="卡余额(元)"
              align="center"
              v-if="formThead2.balance.checked"
              min-width="100px"
            >
              <template slot-scope="scope">
                <div
                  v-if="scope.row.rechargeState == 0"
                >{{ scope.row.balance | amountyuan | isAuto}}</div>
                <div v-if="scope.row.rechargeState == 1">{{ scope.row.balance | amountyuan}}</div>
              </template>
            </el-table-column> -->

            <!-- <el-table-column
              prop="rechargeMode"
              label="充值模式"
              align="center"
              v-if="formThead2.rechargeMode.checked"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.rechargeMode | rechargeModeType }}</span>
              </template>
            </el-table-column>-->

            <el-table-column
              prop="rechargeSerial"
              label="修正序列号"
              align="center"
              min-width="110px"
              v-if="formThead2.rechargeSerial.checked"
            ></el-table-column>
            <el-table-column
              prop="rechargeState"
              label="领取状态"
              align="center"
              v-if="formThead2.rechargeState.checked"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.rechargeState | rechargeStateType }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="paymentTime"
              label="修正时间"
              align="center"
              min-width="150px"
              v-if="formThead2.paymentTime.checked"
            ></el-table-column>
            <el-table-column
              prop="successTime"
              label="到账时间"
              align="center"
              min-width="150px"
              v-if="formThead2.successTime.checked"
            ></el-table-column>
            <el-table-column
              prop="syncState"
              label="同步标志"
              align="center"
              v-if="formThead2.syncState.checked"
            >
              <template slot-scope="scope">
                <span>
                  {{
                  scope.row.syncState == "0" ? "未同步" : "已同步"
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="page">
          <el-pagination
            @size-change="rechargeChange"
            @current-change="rechargeChangepage"
            :current-page="rechargePage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="rechargeSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount1"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 弹窗 -->
    <el-dialog
      width="800px"
      custom-class="customWidth"
      center
      :before-close="closeDialog"
      title="人员信息"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="addDialogFormVisible"
      min-width="600px"
    >
      <el-table
        v-loading="loading"
        :data="userInfo"
        ref="table"
        border
        highlight-current-row
        style="width: 100%; margin-left: -30px"
        max-height="450"
        :header-cell-style="headFirst"
        :cell-style="(res) => headFirst_col(res, [])"
      >
        <el-table-column prop="unitName" label="学校" align="center"></el-table-column>
        <el-table-column prop="departmentName" label="班级" align="center"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="cardNumber" label="卡号" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="handle(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 修正弹框 -->
    <el-dialog
      title="消费修正操作"
      :visible.sync="subscribe"
      width="460px"
      center
      :close-on-click-modal="false"
      :before-close="subCloseDialog"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="班级:">
          <el-col :span="24">
            <b>{{ userForm.departmentName }}</b>
          </el-col>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-col :span="24">
            <b>{{ userForm.userName }}</b>
          </el-col>
        </el-form-item>
        <el-form-item label="当前消费金额:">
          <el-col :span="24">
            <b>{{ ruleForm.expenditure }}</b>
          </el-col>
        </el-form-item>
        <el-form-item label="修正后金额:" prop="newExpenditure">
          <el-input-number
            size="mini"
            v-model="ruleForm.newExpenditure"
            :precision="1"
            :step="0.1"
            :min="0"
            :max="ruleForm.expenditure"
          ></el-input-number>元
        </el-form-item>
        <el-form-item label="提示:">
          操作后返还
          <b style="color:red">{{(ruleForm.expenditure - ruleForm.newExpenditure).toFixed(2)}}</b>元
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="subCloseDialog">取 消</el-button>
        <el-button type="primary" @click="subscribeAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询条件
      userName: '',
      cardNumber: '',
      userNumber: '',
      datetime: '',
      time: [],
      chargingType: '',
      cardtypesoption: [
        {
          label: '消费',
          value: 1
        },
        {
          label: '水控',
          value: 15
        }
      ],
      // 分组
      groupingGuid: '',
      groupingoption: [],
      // 部门
      departmentGuid: '',
      departmentoptions: [],
      adjustState: '',
      adjustStateOption: [
        {
          label: '已领取',
          value: 1
        },
        {
          label: '未领取',
          value: 0
        }
      ],

      labelPosition: 'right',
      // 弹窗
      addDialogFormVisible: false,

      // 查询表单
      elform: {},
      rules: {},
      /**
       * 修正弹窗内容
       */
      subscribe: false,
      ruleForm: {
        // 修正后金额
        newExpenditure: 0,
        expenditure: 0
      },

      userForm: {
        userName: ''
      },
      userInfo: {},
      // tabs控制属性
      activeName: 'first',
      Flagcheck: true,

      // 是否显示个人信息
      isInfo: false,
      // 时间限定
      datetime: [],
      time: [],
      formThead: {
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        originBalance: {
          label: '原卡余额(元)',
          prop: 'originBalance',
          checked: true
        },
        expenditure: {
          label: '消费金额(元)',
          prop: 'expenditure',
          checked: true
        },
        newBalance: { label: '余额(元)', prop: 'newBalance', checked: true },
        dataMakeTime: {
          label: '消费时间',
          prop: 'dataMakeTime',
          checked: true
        },
        isSuccess: { label: '交易状态', prop: 'isSuccess', checked: true },
        // useType: { label: '消费类型', prop: 'useType', checked: true },
        dataType: { label: '数据类型', prop: 'dataType', checked: true },
        serialNumber: {
          label: '卡片流水号',
          prop: 'serialNumber',
          checked: true
        },
        // tradeSerialNumber: {
        //   label: '交易流水号',
        //   prop: 'tradeSerialNumber',
        //   checked: true
        // },

        terminalCode: {
          label: '设备编号',
          prop: 'terminalCode',
          checked: true
        },
        place: { label: '场所', prop: 'place', checked: true }
      },
      // 消费修正操作列表
      consumptionList: [],
      // 消费修正操作列表
      filename: '消费修正表',
      // 充值时间限制
      rechargeTime: [],
      rtime: [],

      // 充值明细
      rechargeList: [],

      loading: false,
      loading2: false,
      /**
       * 消费修正操作分页参数
       */
      detailsTotal: null,
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      recordCount: 0,
      /**
       * 充值明细
       */
      rechargeNum: 1,
      rechargePage: 1,
      rechargeSize: 20,
      recordCount1: 0,
      formThead2: {
        departmentName: {
          label: '部门名称',
          prop: 'departmentName',
          checked: true
        },
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        walletName: { label: '钱包名称', prop: 'walletName', checked: true },

        rechargeAmount: {
          label: '修正金额(元)',
          prop: 'rechargeAmount',
          checked: true
        },
        // balance: { label: '充值后金额(元)', prop: 'balance', checked: true },
        // rechargeMode: {
        //   label: '充值模式',
        //   prop: 'rechargeMode',
        //   checked: true
        // },
        rechargeSerial: {
          label: '修正序列号',
          prop: 'rechargeSerial',
          checked: true
        },
        rechargeState: {
          label: '领取状态',
          prop: 'rechargeState',
          checked: true
        },
        paymentTime: { label: '修正时间', prop: 'paymentTime', checked: true },
        successTime: { label: '到账时间', prop: 'successTime', checked: true },
        syncState: { label: '同步标志', prop: 'syncState', checked: true }
      },
      searchInfo2: {},
      filename2: '消费修正记录表'
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  filters: {
    rechargeStateType(val) {
      if (val == 0) {
        return '未领取'
      }
      if (val == 1) {
        return '已领取'
      }
    },
    rechargeModeType(mode) {
      if (mode == '0') {
        return '本地充值'
      } else if (mode == '1') {
        return '平台账户充值'
      } else if (mode == '2') {
        return '支付宝充值'
      } else if (mode == '3') {
        return '充值机充值'
      } else if (mode == '4') {
        return '充值合并'
      } else if (mode == '6') {
        return '微信充值'
      }
    },
    isAuto(val) {
      if (val == 0) {
        return '—'
      } else {
        return val
      }
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
    // 查询单位分组
    this.unitgroup()
    // 查询部门
    this.departmentselectlist()
  },
  mounted() {
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']

    this.rechargeTime = [
      this.getNowTime('yy-mm-dd'),
      this.getNowTime('yy-mm-dd')
    ]
    this.rtime = ['00:00:00', '23:59:59']
  },

  methods: {
    /**
     * 查询单位分组
     */
    unitgroup() {
      this.groupingoption = []
      this.$http({
        url: this.$http.adornUrl('/unit/unit-user-group-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].groupGuid,
              label: Arr[i].groupName
            }
            this.groupingoption.push(itemobj)
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    /**
     * 部门选择
     */
    departmentselectlist() {
      this.departmentoptions = []
      this.$http({
        url: this.$http.adornUrl('/department/query-department-info'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].departmentGuid,
              label: Arr[i].departmentName
            }
            this.departmentoptions.push(itemobj)
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 消费修正人员查询
    getUserInfo() {
      if (
        this.userName != '' ||
        this.cardNumber != '' ||
        this.userNumber != ''
      ) {
        let messageContent = {
          cardNumber: this.cardNumber,
          unitGuid: this.changeschoolid,
          userName: this.userName,
          userNumber: this.userNumber,
          groupGuid: this.groupingGuid,
          departmentGuid: this.departmentGuid
        }
        this.$http({
          url: this.$http.adornUrl(
            '/api/v1/Student/student-user-info-brief-search'
          ),
          method: 'post',
          data: this.$http.adornData({
            messageContent: messageContent,
            messageType: 0
          })
        }).then(({ data }) => {
          if (data.messageCode == 200) {
            this.pageNum = 1
            if (data.messageContent.length > 1) {
              this.userInfo = data.messageContent
              this.addDialogFormVisible = true
            } else if (data.messageContent.length == 1) {
              this.userForm = data.messageContent[0]
              if (this.activeName == 'first') {
                // 消费修正操作
                this.getConsumption()
              }
            } else {
              this.$message({
                message: '暂时没有此人',
                type: 'warning'
              })
              this.userForm = { userName: '' }
              this.consumptionList = []
              this.consumptionList = data.messageContent.data || []
              this.recordCount = 0
              this.currentPage = 1
            }
          } else {
            this.$message.error(data.errorMessage)
          }
        })
      } else {
        this.$message({
          message: '请填写姓名或卡号或学生编号后查询',
          type: 'warning'
        })
      }
    },
    /**
     * 同名同姓时的弹窗
     */
    // 右方插插
    closeDialog(done) {
      this.addDialogFormVisible = false
      done()
    },
    // 选择
    handle(val) {
      this.userForm = { ...val }
      if (
        this.datetime == null ||
        this.datetime.length == 0 ||
        this.rechargeTime == null
      ) {
        this.$message({
          message: '请选择时间',
          type: 'warning'
        })
      } else {
        if (this.activeName == 'first') {
          // 消费修正操作
          this.getConsumption()
        }
      }

      this.addDialogFormVisible = false
    },
    // 打印需要用到的函数
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    /**
     *  消费修正
     */
    // 修正操作弹窗
    handleCorrect(row) {
      this.subscribe = true
      this.ruleForm.newExpenditure = 0
      this.ruleForm.expenditure = Math.abs(this.amountyua(row.expenditure))
      this.ruleForm.dataGuid = row.dataGuid
    },
    // 修正关闭弹窗
    subCloseDialog() {
      this.subscribe = false
    },
    // 修正确定按钮
    subscribeAdd() {
      console.log(this.ruleForm.newExpenditure)
      this.$http({
        url: this.$http.adornUrl('/card/card-consume-revise'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            newExpenditure: this.ruleForm.newExpenditure * 100,
            dataGuid: this.ruleForm.dataGuid,
            operatorGuid: this.userGuid,
            unitGuid: this.changeschoolid,
            userGuid: this.userForm.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            message: '修正成功',
            type: 'success'
          })
          this.subscribe = false
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },

    // 消费修正操作模块重新渲染
    checkboxChanged() {
      this.$nextTick(() => {
        this.$refs['table'].doLayout()
      })
    },
    // 消费修正操作明细
    getConsumption() {
      if (this.datetime == null || this.datetime.length == 0) {
        this.$message({
          message: '请选择时间',
          type: 'warning'
        })
      }
      if (this.userForm) {
        this.searchInfo = {
          userGuid: this.userForm.userGuid,
          startTime: this.datetime[0] + ' ' + this.time[0],
          endTime: this.datetime[1] + ' ' + this.time[1],
          // useType: this.chargingType
        }
        this.$http({
          url: this.$http.adornUrl('/card/card-consume-details-page'),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              asc: true,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              searchInfo: this.searchInfo
            },
            messageType: 0
          })
        }).then(({ data }) => {
          if (data.messageCode == 200) {
            this.consumptionList = data.messageContent.data || []
            this.recordCount = data.messageContent.recordCount
            this.currentPage = data.messageContent.pageNum
            if (this.consumptionList.length == 0) {
              this.$message({
                message: '查询成功当前暂无数据',
                type: 'success'
              })
            }
          } else {
            this.$message.error(data.errorMessage)
          }
        })
      }
    },

    async onExport(type) {
      if (this.consumptionList.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      // 获取所有个人用水汇总数据
      await this.getAll()
      if (type == 'print') {
        this.printDailyJS()
      } else {
        this.export2Excel()
      }
    },
    // 获取所有消费修正操作明细数据
    getAll() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl('/card/card-consume-details-page'),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount,
                searchInfo: _this.searchInfo
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist = data.messageContent.data
              _this.exportlist.map(item => {
                item.originBalance = _this.$options.filters.amountyuan(
                  item.originBalance
                )
                item.expenditure = _this.$options.filters.amountyuan(
                  item.expenditure
                )
                item.newBalance = _this.$options.filters.amountyuan(
                  item.newBalance
                )
                item.isSuccess = _this.$options.filters.isSuccesstype(
                  item.isSuccess
                )
                item.useType = _this.$options.filters.filterchargingType(
                  item.useType
                )
              })
              resolve(_this.exportlist)
            } else {
              _this.$message.error(data.errorMessage)

              reject(data.errorMessage)
            }
          })
      })
    },
    // 导出
    export2Excel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        for (let key in this.formThead) {
          if (this.formThead[key].checked) {
            tHeaderarr.push(this.formThead[key].label)
          }
        }
        const tHeader = tHeaderarr
        //
        let filterValArr = []
        for (let key in this.formThead) {
          if (this.formThead[key].checked) {
            filterValArr.push(this.formThead[key].prop)
          }
        }
        const filterVal = filterValArr
        const list = this.exportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.userForm.userName + '-' + this.filename + nowtime
        })
      })
    },
    // 打印相关
    printDailyJS() {
      let someJSONdata = this.exportlist
      const title = this.userForm.userName + '-' + this.filename
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead) {
        if (this.formThead[key].checked) {
          if (this.formThead[key].prop == 'dataMakeTime') {
            properties.push({
              displayName: this.formThead[key].label,
              field: this.formThead[key].prop,
              columnSize: 150 / (Object.keys(this.formThead).length + 1) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead[key].label,
              field: this.formThead[key].prop,
              columnSize: 100 / (Object.keys(this.formThead).length + 1) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getConsumption()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getConsumption()
    },
    getHeaderDate(val) {
      this.formThead = val
    },
    /**
     * 消费修正记录
     */

    //合计查询
    searchtotal() {
      this.detailsTotal = null
      let _this = this
      _this.loading2 = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl('/card/card-consume-revise-total'),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo2,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading2 = false
            if (data.messageCode == 200) {
              if (data.messageContent) {
                _this.detailsTotal = {
                  ...data.messageContent
                  // departmentName: '合计:'
                }
              }
              resolve(data.messageContent)
            } else {
              _this.$message.error(data.errorMessage)
              reject(data.errorMessage)
            }
          })
      })
    },
    // 消费修正记录模块重新渲染
    checkboxChanged2() {
      this.$nextTick(() => {
        this.$refs['rechargeTable'].doLayout()
      })
    },
    // 消费修正记录查询
    async rechargeTimeChange() {
      console.log(111)
      this.rechargeNum = 1
      this.searchInfo2 = {
        startTime: this.datetime[0] + ' ' + this.time[0],
        endTime: this.datetime[1] + ' ' + this.time[1],
        unitGuid: this.changeschoolid,
        userName: this.userName,
        userNumber: this.userNumber,
        groupGuid: this.groupingGuid,
        departmentGuid: this.departmentGuid,
        adjustState: this.adjustState
      }
      await this.searchtotal()
      this.getRecharge()
    },
    // 消费修正记录数据
    getRecharge() {
      this.loading2 = true
      this.$http({
        url: this.$http.adornUrl('/card/card-consume-revise-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.rechargeNum,
            pageSize: this.rechargeSize,
            searchInfo: this.searchInfo2
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading2 = false
        if (data.messageCode == 200) {
          this.rechargeList = data.messageContent.data || []
          // this.consumptionList = data.messageContent.data;
          this.recordCount1 = data.messageContent.recordCount
          this.rechargePage = data.messageContent.pageNum
          console.log(this.detailsTotal)
          if (this.rechargeList.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          } else {
            this.rechargeList.push({ ...this.detailsTotal })
          }
        }
      })
    },
    async onRechargeExport(type) {
      if (this.rechargeList.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      // 获取所有充值列表数据
      await this.getRechargeAll()
      if (type == 'print') {
        this.printRechargeDailyJS()
      } else {
        this.exportRechargeExcel()
      }
    },

    // 获取消费修正记录数据
    getRechargeAll() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl('/card/card-consume-revise-page'),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount1,
                searchInfo: _this.searchInfo2
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportRechargelist = data.messageContent.data || []
              _this.exportRechargelist.push({
                ..._this.detailsTotal
              })
              _this.exportRechargelist.map((item, index) => {
                item.rechargeAmount = _this.$options.filters.amountjiao(
                  item.rechargeAmount
                )
                if (index != _this.exportRechargelist.length - 1) {
                  // item.balance =
                  //   item.rechargeMode == 0
                  //     ? _this.$options.filters.isAuto(
                  //         _this.$options.filters.amountyuan(item.balance)
                  //       )
                  //     : _this.$options.filters.amountyuan(item.balance)

                  item.rechargeMode = _this.$options.filters.rechargeModeType(
                    item.rechargeMode
                  )
                  item.rechargeState = _this.$options.filters.rechargeStateType(
                    item.rechargeState
                  )
                  item.syncState = item.syncState == '0' ? '未同步' : '已同步'
                }
              })

              resolve(_this.exportlist)
            } else {
              _this.$message.error(data.errorMessage)

              reject(data.errorMessage)
            }
          })
      })
    },
    // 导出
    exportRechargeExcel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            tHeaderarr.push(this.formThead2[key].label)
          }
        }
        const tHeader = tHeaderarr
        //
        let filterValArr = []
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            filterValArr.push(this.formThead2[key].prop)
          }
        }
        const filterVal = filterValArr
        const list = this.exportRechargelist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename2 + nowtime
        })
      })
    },
    // 打印相关
    printRechargeDailyJS() {
      let someJSONdata = this.exportRechargelist
      const title = this.filename2
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead2) {
        if (this.formThead2[key].checked) {
          if (
            this.formThead2[key].prop == 'paymentTime' ||
            this.formThead2[key].prop == 'successTime'
          ) {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 120 / (Object.keys(this.formThead2).length + 2) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 100 / (Object.keys(this.formThead2).length + 2) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo2.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo2.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    rechargeChange(val) {
      this.rechargeSize = val
      this.getRecharge()
    },
    rechargeChangepage(val) {
      this.rechargeNum = val
      this.getRecharge()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs__content {
  .el-col-6 {
    height: 34px;
  }
}

.time {
  margin-bottom: 10px;
}
.tabs_main {
  padding: 10px;
  .el-form-item {
    margin-bottom: 5px;
  }
  /deep/.el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 5px;
  }
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .el-tab-pane {
    .el-form.el-form--inline {
      width: 100%;
    }
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin-bottom: 5px;
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>